<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<script type="text/javascript">
var login=false;
var commentNo;
var info="";
var pageNo=1;
var star=0;
$(function(){
	var productAmount=${requestScope.map.info.inventoryVO.inventoryAmount };
	if(productAmount==0){
		alert("SOLD OUT!!");
		return false;
	}
	$("#reviewboard").click(function(){
		location.href="reviewBoard.do?productId=${requestScope.map.info.productId }";
	});
	$("#cartBtn").click(function(){
		if($(":text[name=amount]").val()==""){
			alert("수량을 적어주세요");
			return false;
		}
		if("${sessionScope.cvo==null }"=="true"){
			alert("로그인해주세요");
			location.href="${initParam.root}/consumer_login.do";
		}else{
			if($(":text[name=amount]").val()>productAmount){
				alert("재고가"+productAmount+"개 남았습니다.");
				return false;
			}
			$.ajax({
				type:"post",
				url:"${initParam.root}/addCartList.do",
				data:"productId=${requestScope.map.info.productId }&"+
				"productName=${requestScope.map.info.productName }&productPrice=${requestScope.map.info.productPrice }&"+
				"productMaker=${requestScope.map.info.productMaker }&sellerId=${requestScope.map.info.sellerId}"+
				"&amount="+$(":text[name=amount]").val(),
				success:function(){
					if(confirm("장바구니로 이동하시겠습니까?"))
						location.href="getCartList.do";
				}
			});//ajax
		}//ifelse
	});//click
	
	$("#buyBtn").click(function(){
		if("${sessionScope.cvo==null}"=="true" ){
			alert("로그인해주세요");
			location.href="${initParam.root}/consumer_login.do";
		}else{
			if($(":text[name=amount]").val()>productAmount){
				alert("재고가"+productAmount+"개 남았습니다.");
				return false;
			}if($(":text[name=amount]").val()==""){
				alert("수량을 적어주세요");
				return false;
			}
		location.href="buyProductView.do?productId=${requestScope.map.info.productId }&productName=${requestScope.map.info.productName }&"+
				"productPrice=${requestScope.map.info.productPrice }&productMaker=${requestScope.map.info.productMaker }"+
				"&sellerId=${requestScope.map.info.sellerId}&amount="+$(":text[name=amount]").val();
		}
	});//click

	//상품평 부분------------------------------------
	$("#comment").on("click",":button[name='replyComment']",function(){	
		 $(":button[name='closeModify']").click();
		 $("#replyComment").remove();
		 $(":button[name='closeReply']").val("덧글");
		 $(":button[name='closeReply']").attr("name","replyComment");		 
	        $(this).parent().parent().next().after("<tr id='replyComment'><td colspan='3'><input type='text' id='replyInfo'><input type='button' value='댓글입력' id='replyBtn'></td></tr>"); 
	         commentNo=$(this).attr("id");
	         $(this).val("댓글취소");
	         $(this).attr("name","closeReply");
	         
	}); 
	 
	$("#comment").on("click",":button[name='closeReply']",function(){
		$("#replyComment").remove();	
		$(this).val("덧글");
		$(this).attr("name","replyComment");
	});
	 
	 $("#comment").on("click","#replyBtn",function(){
		 $.ajax({
			 type:"post",
			 url:"writeCommentReply.do",
			 data:"commentNo="+commentNo+"&replyInfo="+$("#replyInfo").val(),
			 dataType:"json",
			 success:function(jsonData){
				 getCommentList(pageNo);
			 }
		 });
	 });
	 
	$("#comment").on("click",":button[name='deleteReply']",function(){
		 $.ajax({
			 type:"post",
			 url:"deleteCommentReply.do",
			 data:"commentNo="+$(this).attr("id"),
			 dataType:"json",
			 success:function(jsonData){
				 alert("ads");
				 getCommentList(pageNo);
			 }
		 });		 
	 }); 
	
	 $("#comment").on("click",":button[name='modifyReply']",function(){		
		$(":button[name='closeReply']").click();
		//alert( $(this).parent().parent().next().html("<td>수정</td>"));
		if(info==""){
			index=$(this).parent().parent().index();
			info=$(this).parent().parent().next().text();
			commentNo=$(this).attr("id");
			$(this).parent().parent().next().html("<td colspan='3'><input type='text' id='modifyInfo' size='50' value='"+info+"'><input type='button' value='수정' id='modifyBtn'></td>");
			$(this).val("수정취소");
			
			$(this).attr("name","closeModify");
		}else{
			$(":button[name='closeModify']").val("수정");
			$(":button[name='closeModify']").attr("name","modifyReply");
			$(this).parent().parent().parent().children().eq(index+1).html("<td colspan='3'>"+info+"</td>");
			index=$(this).parent().parent().index();
			info=$(this).parent().parent().next().text(); 
			commentNo=$(this).attr("id");
			$(this).parent().parent().next().html("<td colspan='3'><input type='text' size='50' id='modifyInfo' value='"+info+"'><input type='button' value='수정' id='modifyBtn'></td>");
			$(this).val("수정취소");
			$(this).attr("name","closeModify"); 
		}	 
	 });
	 
	 $("#comment").on("click",":button[name='closeModify']",function(){	
			$(this).parent().parent().next().html("<td colspan='3'>"+info+"</td>");
			$(this).val("수정");
			$(this).attr("name","modifyReply");
	});
	
	 
	 $("#comment").on("click","#modifyBtn",function(){
		 $.ajax({
			 type:"post",
			 url:"modifyComment.do",
			 data:"commentNo="+commentNo+"&modifyInfo="+$("#modifyInfo").val(),
			 dataType:"json",
			 success:function(jsonData){
				 getCommentList(pageNo);
			 }
		 });
	 });

	if("${sessionScope.cvo!=null}"=="true"){
		login=true;
	}	
	getCommentList(pageNo);
	
	$("#writeComment").click(function(){
		if($("#info").val()==""){
			alert("상품평을 입력하시기 바랍니다.");
			$("#info").focus();
			return false;
		}
		 $.ajax({
			 type:"post",
			 url:"writeProductComment.do",
			 data:"productId=${requestScope.map.info.productId}&commentInfo="+$("#info").val()+"&starRating="+star,
			 dataType:"json",
			 success:function(jsonData){
				if(jsonData==1){
					getCommentList(pageNo);
					$("#info").val("");
				}
			 }
		 });
		
	});
	var starResult;
	$("span.star_rating").mousemove(function(e){
		starResult  = ((e.pageX-454) * 100 )/77;

		if(parseInt(starResult)>96){
			starResult=100;
		}else if(parseInt(starResult)>86){
			starResult=90;
		}else if(parseInt(starResult)>76){
			starResult=80;
		}else if(parseInt(starResult)>66){
			starResult=70;
		}else if(parseInt(starResult)>56){
			starResult=60;
		}else if(parseInt(starResult)>46){
			starResult=50;
		}else if(parseInt(starResult)>36){
			starResult=40;
		}else if(parseInt(starResult)>26){
			starResult=30;
		}else if(parseInt(starResult)>16){
			starResult=20;
		}else if(parseInt(starResult)>6){
			starResult=10;
		}else{
			starResult=0;
		}
		$(".star_rating span").css("width",starResult+"%");
		$("#star_point").html(starResult/20+"/5");
	});
	$("span.star_rating").mouseleave(function(){
		$(".star_rating span").css("width",star+"%");
		$("#star_point").html(star/20+"/5점");
	}) 
	$("span.star_rating").click(function(event){
		star=starResult;
	});	
});

function getCommentList(p){
	pageNo=p;
	$.ajax({
		 type:"post",
		 url:"getProductCommentList.do",
		 data:"productId=${requestScope.map.info.productId}&pageNo="+p,
		 dataType:"json",
		 success:function(jsonData){
			  $("#comment").html("");
			  star=0;
			  $("#star_point").html("0/5점");
			  $(".star_rating span").css("width","0%");
			 var str="<table>";
			 $.each(jsonData.list,function(index,val){
				 var reply="";
				 var pointer="";
					if(val.relevel>0){
					for(i=0;i<val.relevel;i++){
						reply+="&nbsp;&nbsp;"
					}	
					pointer+="-> ";
					}else{
						pointer+="<span class='star_view'><span style='width:"+(parseFloat(val.starRating))+"%;'></span></span> ";
						//pointer+=(parseFloat(val.starRating)*20);
					}						
				if(login==true){
					var deleteReply="";
					var modifyReply="";
					if(val.id=="${sessionScope.cvo.id}"){
						deleteReply="<input type='button' name='deleteReply' id='"+val.commentNo+"' value='삭제'>";
						modifyReply="<input type='button' name='modifyReply' id='"+val.commentNo+"' value='수정'>";
					}
				str+="<tr><td>"+reply+pointer+val.id+"</td><td>"+val.commentDate+"</td><td><input type='button' name='replyComment' id='"+val.commentNo+"' value='덧글'>"+deleteReply+modifyReply+"</td></tr>";
				str+="<tr><td colspan='3'><strong style='font-size: 11pt'>"+reply+val.commentInfo+"</strong></td></tr>";
				}else{
				str+="<tr><td>"+reply+pointer+val.id+"</td><td>"+val.commentDate+"</td></tr>";
				str+="<tr><td colspan='2'><strong style='font-size: 11pt'>"+reply+val.commentInfo+"</strong></td></tr>";
				}				
			});
			 str+="</table>"
			 if(jsonData.pb.previousPageGroup){
				 str+="<a href='javascript:getCommentList("+(parseInt(jsonData.pb.startPageOfPageGroup)-1)+");'>◀</a>"
			 }
			 for(i=jsonData.pb.startPageOfPageGroup;i<=jsonData.pb.endPageOfPageGroup;i++){
				 if(i!=jsonData.pb.nowPage){
					 str+="<a href='javascript:getCommentList("+i+");'>"+i+"</a>&nbsp;";
				 }else{
					 str+=i+"&nbsp;";
				 }
			 }
			 if(jsonData.pb.nextPageGroup){
				 str+="<a href='javascript:getCommentList("+(parseInt(jsonData.pb.endPageOfPageGroup)+1)+");'>▶</a>"
			 }
			$("#comment").html(str); 
		 }
	 });
}
</script>

<table>

<tr style="font-size: 15px;">
	<td rowspan="7"><img src="upload/${requestScope.map.info.productId }.jpg" width="500" height="250"></td>
	<td>상품명</td><td style="font-weight: bold;">${requestScope.map.info.productName }</td>
</tr>
<tr style="font-size: 15px;">
	<td>상품가격</td>
	<c:choose>
		<c:when test="${requestScope.map.info.inventoryVO.inventoryAmount >0}">
			<td style="font-weight: bold;">${requestScope.map.info.productPrice }원</td>
		</c:when>
		<c:when test="${requestScope.map.info.inventoryVO.inventoryAmount <1}">
			<td style="color: red; font-weight: bold;">SOLD OUT</td>
		</c:when>
	</c:choose>
</tr>
<tr style="font-size: 15px;">
	<td>제조사</td><td>${requestScope.map.info.productMaker }</td>
</tr>
<tr style="font-size: 15px;">
	<td>등록일시</td><td>${requestScope.map.info.productDate }</td>
</tr>
<tr style="font-size: 15px;">
	<td>Category</td><td>${requestScope.map.info.productCategory }</td>
</tr>
<tr style="font-size: 15px;">
	<td>판매자</td><td>${requestScope.map.info.sellerId }</td>
</tr>
<tr style="font-size: 15px;">
	<td>별점</td>
	<td>
	<span class="star_view">
 <span style="width:${requestScope.map.info.starRating }%;"></span>
 </span>
 </td>
</tr>

</table>
<br>
<strong style="font-size: 10pt"></strong>



<c:if test="${requestScope.map.info.inventoryVO.inventoryAmount >0}">

<input type="text" name="amount">
<input type="button" value="장바구니담기" id="cartBtn" class="button">
<input type="button" value="구매하기" id="buyBtn" class="button">

</c:if>

<hr>
<pre><span style="max-width: 300px">Info. <br> ${requestScope.map.info.productInfo }</span></pre>
<hr>

<%--리뷰게시판 --%>
<table align="center">
  <thead>
  	<tr>
  		<th width="50%">title</th><th>작성자</th><th>작성일</th><th>조회수</th>
  	</tr>
  </thead>
  <c:forEach items="${requestScope.map.lvo.list }" var="lvo">
  <tbody>
  	<tr>
  		<td><a href="showContentReviewBoard.do?reviewNo=${lvo.reviewNo }&count=${lvo.count }">${lvo.title }</a></td>
  		<td>${lvo.consumerId }</td><td>${lvo.date }</td><td>${lvo.count }</td>
  	</tr>
  </tbody>
  </c:forEach>
</table>
	
<%--페이징 처리 --%>
	 <c:if test="${requestScope.map.lvo.pagingBean.previousPageGroup}">
	 <a href="getProductInfo.do?pageNo=${requestScope.map.lvo.pagingBean.startPageOfPageGroup-1}&productId=${requestScope.map.info.productId }">◀</a>
	 </c:if>
	 &nbsp;&nbsp;
	<c:forEach var="i" 
	begin="${requestScope.map.lvo.pagingBean.startPageOfPageGroup}"
	 end="${requestScope.map.lvo.pagingBean.endPageOfPageGroup}">
	 <c:choose>
	 <c:when test="${requestScope.map.lvo.pagingBean.nowPage!=i}">
	 <a href="getProductInfo.do?pageNo=${i}&productId=${requestScope.map.info.productId }">${i}</a>
	 </c:when>
	 <c:otherwise>
	${i}
	</c:otherwise>
	</c:choose>
	</c:forEach>	 
	&nbsp;&nbsp;
	 <c:if test="${requestScope.map.lvo.pagingBean.nextPageGroup}">
	 <a href="getProductInfo.do?pageNo=${requestScope.map.lvo.pagingBean.endPageOfPageGroup+1}&productId=${requestScope.map.info.productId }">▶</a>
	 </c:if>
	<c:set scope="session" var="flag" value="true"></c:set>
<c:choose>
	<c:when test="${sessionScope.cvo!=null }">
		<input type="button" value="리뷰쓰기" id="reviewboard" class="button">
	</c:when>
</c:choose>
<hr>

<h4>상품평</h4>
<div id="comment"></div>
<c:if test="${sessionScope.cvo!=null }">
<table align="center">
<tr>
	<td><span class="star_rating">
 <span style="width:0%;"></span>
 </span></td> 
 <td width="60" align="center"><span id="star_point" >0/5점</span></td>
<td><input type="text" id="info"><input type="button" value="상품평입력" id="writeComment" class="button"></td>
</table>

</c:if>
